import React from 'react'

// components
import FormInput from "../FormInput/FormInput"
import CustomButton from "../CustomButton/CustomBotton";

// stylesheet
import './CustomForm.css'

const CustomForm = props => {
    const {
        onSubmit,
        inputList,
        title,
    } = props

    const inputListTemplate = inputList.map(input => {
        return (
            <FormInput
                key={input.placeholder}
                icon={input.icon}
                formRef={input.formRef}
                placeholder={input.placeholder}
                type={input.type}
                value={input.value}
                code={input.code}
            />
        )
    })

    const titleTemplate = title ? <h1>{title}</h1> : null

    return (
        <div className='form-container'>
            {titleTemplate}
            <form onSubmit={onSubmit}>
                {inputListTemplate}
            </form>
        </div>
    )
}

export default CustomForm
